<template>
  <div class='container'>
    <el-dialog
      :title="rows?'修改文章':'添加文章'"
      :visible="dialogVisible"
      width="50%"
      @close="handleClose">
      <el-form ref="form" :model="rows" label-width="80px" :rules="rules">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="rows.title">{{rows.title}}</el-input>
        </el-form-item>
        <el-form-item label="文章内容">
          <!-- 文本 -->
          <div class="edit_container">
            <quill-editor
                v-model="content"
                class="edit_container-box"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
               >
            </quill-editor>
          </div>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="rows.url"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { add, update } from '@/api/hmmm/articles.js'
export default {
  components: {
    quillEditor
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    rows: {
      type: Object
    }
  },
  data () {
    return {
      content: '',
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['image', 'video'] // 上传图片、上传视频
          ]
        }
      },
      str: '',
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 3, max: 9, message: '长度在 3 到 9个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onEditorReady (editor) {
      // 准备编辑器
    },
    onEditorBlur () {
      console.log(this.content)
    }, // 失去焦点事件
    escapeStringHTML (str) {
      str = str.replace(/&lt;/g, '<')
      str = str.replace(/&gt;/g, '>')
      return str
    },
    handleClose () {
      this.$emit('update:dialogVisible', false)
    },
    // 提交
    async onSubmit () {
      if (this.rows.id) {
        await update({
          id: this.rows.id,
          title: this.rows.title,
          articleBody: this.content,
          videoURL: this.rows.url
        })
        this.$message.success('修改成功')
      } else {
        console.log('add')
        await add({
          title: this.rows.title,
          articleBody: this.content,
          videoURL: this.rows.url
        })
        this.$message.success('添加成功')
      }
      this.$emit('success')
      this.$emit('update:dialogVisible', false)
    },
    // 关闭
    onClose () {
      this.$emit('update:dialogVisible', false)
    }
  },
  mounted () {
    if (this.rows.id) {
      const content = this.rows.articleBody // 请求后台返回的内容字符串
      this.content = this.escapeStringHTML(content)
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>

<style scoped lang='less'>
.edit_container {
  // background-color: rgb(233, 26, 26);
  height: 245px;
  .edit_container-box {
    height: 200px;
  }
}
</style>``
